<template>
  <div class="settings-item">
    <div class="header">
      <div class="title">AI 配置</div>
    </div>
    <div class="content">
      <div class="flex-box">
        <div class="label">AI 模型</div>
        <div class="items">
          <Select v-model="form.aimodel">
            <Option v-for="item in modelList" :value="item.id" :key="item.id"> {{ item.name }}</Option>
          </Select>
          <Icon class="ml-1" @click="visible=true" type="md-settings" size="20" />
        </div>
      </div>
      <div class="flex-box wrap">
        <div class="label">
          <span>提示词</span>
          <Tooltip
            transfer
            theme="light"
            placement="bottom"
            max-width="400"
            content="提示"
          >
            <Icon type="ios-alert-outline" size="12" />
          </Tooltip>
        </div>
        <div class="items">
          <Input
            v-model="form.promptwords"
            type="textarea"
            :rows="4"
            placeholder="请输入提示词"
          />
        </div>
      </div>
    </div>
  </div>
  <CommonDialog
    title="AI 配置"
    v-model="visible"
    :confirmLoading="loading"
    width="500px"
  >
    <Form label-position="left" :label-width="120">
      <FormItem label="AI 模型" prop="configaimodel">
        <Select v-model="formData.configaimodel">
          <Option
            v-for="item in modelList"
            :value="item.id"
            :key="item.id"
            >{{ item.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="记忆轮数" prop="numround">
        <Slider v-model="formData.numround" :min="0" :max="30" :step="1" show-input></Slider>
      </FormItem>
      <FormItem label="回复上限" prop="replylimit">
        <Slider v-model="formData.replylimit" :min="0" :max="8000" :step="100" show-input></Slider>
      </FormItem>
      <FormItem label="温度" prop="temperature">
        <Slider v-model="formData.temperature" :min="0" :max="10" :step="1" show-input></Slider>
      </FormItem>
      <FormItem label="Top_p" prop="topp">
        <Slider v-model="formData.topp" :min="0" :max="1" :step="0.1" show-input></Slider>
      </FormItem>
      <FormItem label="停止序列" prop="stopsequence">
        <Input
          v-model="formData.stopsequence"
          placeholder="多个序列号通过 | 隔开，例如：aaa|stop"
          clearable
        ></Input>
      </FormItem>
      <FormItem label="回复格式" prop="peplyformat">
        <Select v-model="formData.peplyformat">
          <Option v-for="item in TYPE_OPTIONS" :value="item.id" :key="item.id">{{
            item.name
          }}</Option>
        </Select>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button type="primary" @click="submit">确认</Button>
    </template>
  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import CommonDialog from '@/components/CommonDialog/index.vue';

const TYPE_OPTIONS = [{
  name: 'text',
  id: 0
}, {
  name: 'json_object',
  id: 1
}]

const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  },
  modelList: {
    type: Array,
     default: () => []
  }
})

// 弹窗显示
const visible = ref(false);
const loading = ref(false);

const isOpen = ref(false);

const aiList = ref([])

const formData = ref({
  configaimodel: undefined,
  numround: 1,
  replylimit: 2000,
  temperature: 0,
  topp: 0,
  stopsequence: '',
  peplyformat: undefined,
});

const init = () => {
  formData.value.configaimodel = props.form.configaimodel;
  formData.value.numround = props.form.numround;
  formData.value.replylimit = props.form.replylimit;
  formData.value.temperature = props.form.temperature;
  formData.value.topp = props.form.topp;
  formData.value.stopsequence = props.form.stopsequence;
  formData.value.peplyformat = props.form.peplyformat;
}

const submit = () => {
  visible.value = false;
  props.form.configaimodel = formData.value.configaimodel;
  props.form.numround = formData.value.numround;
  props.form.replylimit = formData.value.replylimit;
  props.form.temperature = formData.value.temperature;
  props.form.topp = formData.value.topp;
  props.form.stopsequence = formData.value.stopsequence;
  props.form.peplyformat = formData.value.peplyformat;
};

defineExpose({
  init
})
</script>